/* 
*   功能 : 走点样式表
*   类型 : 创建
*   作者 : 巫昭雯
*   时间 : 2020.2.27
*   内容 : 所有代码
*/

.mc_svg_container {
  border: 1px solid #eee;
  background: radial-gradient(circle, #ffffff, #f0f0f0, #dfdfdf);
  margin-top: 7px;
  height: calc(100% - 7px);
  box-sizing: border-box;
}

/* 兼容 应用程序 */
.mc_svg_container_hl_vertical {
  height: 32%;
}

/* 重新布局表格 */
.mc_svg_head_wrap,
.mc_svg_nav_wrap,
.mc_svg {
  position: absolute;
}

.mc_svg_main_wrap {
  position: absolute;
  overflow: scroll;
  box-sizing: border-box;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  top: 30px;
  left: 30px;
}

.select_all_div {
  background: #eee;
  width: 30px;
  height: 30px;
  position: absolute;
  z-index: 10;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  color: #fff;
  /* line-height: 30px; */
  font-size: 30px;
}

.select_cur_div::after {
  content: "*";
}


/* 滚动条封边 */
.scroll_block {
  background: #eee;
  position: absolute;
  z-index: 10;
}

.scroll_hor {
  width: 17px;
  top: 0;
  height: 30px;
  right: 0px;
}

.scroll_ver {
  width: 30px;
  bottom: 0;
  height: 16px;
  left: 0px;
}

.mc_svg_head {
  height: 30px;
  position: absolute;
  top: 0;
  left: 30px;
  z-index: 8;
  background: #eee;
}

.mc_svg_nav {
  width: 30px;
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 8;
  background: #eee;
}


/* 鼠标移动主体的div */
.div_hover_content {
  color: rgb(255, 255, 255);
  text-align: center;
  position: absolute;
  background: #0002f1;
  top: 0;
  left: 0;
  opacity: 0.3;
  display: none;
  pointer-events: none;
  box-sizing: border-box;
  -ms-touch-action: none;
  /* set for IE */
  touch-action: none;
  /* set for Edge */
  /* z-index: -2; */
}

.div_hover_head,
.div_hover_nav {
  position: absolute;
  background: #0002f1;
  top: 0;
  left: 0;
  /* opacity: 0.8; */
  display: none;
  z-index: -1;
  pointer-events: none;
  box-sizing: border-box;
}


/* 鼠标点击主体svg生成的div */
.click_create_div {
  /* display: inline */
  position: absolute;
  background: #ffcd0d;
  opacity: 0.8;
  text-align: center;
  /* font-size: 12px; */
  /* pointer-events: none; */
  line-height: 20px;
  overflow: hidden;
  box-sizing: border-box;

  /* 取消鼠标移动时选中文字 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.click_create_div:hover {
  cursor: pointer;
}

.click_create_div:focus {
  outline: none;
}

/* 生成块虚点模式样式 */
.click_create_div_virtual_point {
  background: gray;
}

.uncheck_focus_style:focus {
  outline: none;
}

/* 生成点编辑状态 */
.click_create_div_edit {
  text-align: left;
  padding-left: 4px;
  /* overflow: scroll; */
}

.click_create_div_edit:hover {
  cursor: text;
}

/* 框选样式 */
.box_selection_creat_div {
  /* 使框选样式永远优先级最高 */
  background: #037136 !important;
  color: #fff;
}

/* .box_selection_creat_div:hover {  
  cursor: pointer;
} */

/* 框选之后外框div */
.box_selection_wrap_div {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  /* border: 1px solid #025619; */
  display: none;
  /* z-index: 2; */
}

/* 框选之后外框div的下标 */
.small_div {
  background: #025619;
  height: 4px;
  width: 4px;
  position: absolute;
  right: -2px;
  bottom: -2px;
  border: 1px solid #025619;
  border-radius: 1px;
  border-radius: 0.5px;
  z-index: 10;
  pointer-events: auto;
}

.small_div:hover {
  cursor: pointer;
  /* cursor: crosshair; */
}

/* 编辑模式下选中 */
.edit_select {
  border: 2px dotted red;
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
}

/* 设置矩阵样式 */
.rect_border_right {
  stroke-dasharray: 50, 50, 100;
}

/* 头部边框 */
.rect_border_left {
  /* stroke-dasharray: 90, 30 */
  stroke-dashoffset: 0;
}

/* 侧边栏边框 */
.rect_border_top {
  /* stroke-dasharray: 30, 100; */
  stroke-dashoffset: 0;
}

/* 覆盖框选div样式 */
.box_selection_wrap_div {
  /* width: 50px;
  height: 50px;
  margin: 50px; */
  border-top: 2px solid #025619;
  border-left: 2px solid #025619;
  box-sizing: border-box;
  /* position: relative; */
}

/* 选中外框div添加右边框 */
/* .box_selection_wrap_div:before {
  content: '';
  position: absolute;

  right: 0;
  height: attr(data-height);
  width: 2px;
  background-color: #025619;
} */

/* 选中外框div添加下边框 */
.box_selection_wrap_div:after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  width: attr(data-width);
  background-color: #025619;
}


.drag_virtual_div {
  position: absolute;
  border: 2px solid #025619;
  box-sizing: border-box;
  pointer-events: none;
  text-align: center;
  z-index: 8;
}

.show_box_wrap {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.edit_box_div {
  /* width: 100%; */
  height: 30px;
  border: 1px solid #ccc;
  margin-bottom: 2px;
  box-sizing: border-box;
  line-height: 30px;
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  font-weight: 700;
  background: #fff;
  flex-grow: 5;
}

.pos_box_div {
  max-width: 120px;
  margin-right: 5px;
  flex-grow: 1;
}

#form_box,
.form_box {
  position: relative;
  overflow: hidden;
  height: calc(100% - 32px);
  border: #c0c0c0 solid 1px;
  background: #eee;
  box-sizing: border-box;
}


/* 测试虚拟div样式 */
/* .virtual_div_small {
  background: #0002f1;
  position: absolute;
  opacity: 0.3;
  text-align: center;
  font-size: 12px;
  user-select: none;
  color: #fff;
} */

/* 测试数据 */
.test_div {
  position: absolute;
  border: 1px solid red;
  box-sizing: border-box;
  /* display: none; */
}

.test_div:hover {
  cursor: pointer;
}


/* 覆盖item.css样式 */
.mc_step_add,
.mc_step_sub {
  height: 100%;
}

.mc_edit_gp_wrap .mc_checkbox_box {
  height: auto;
}


#mc_trace_point_debugging span:first-child {
  /* min-width: 45px; */
  display: inline-block
}


#mc_trace_point_debugging .mc_item_wrap {
  margin-right: 5px;
}

/* 数据线 */
#mc_trace_point_data_line span {
  flex-grow: 1;
  min-width: 30px;
}


#mc_trace_point_hl span {
  flex-grow: 1;
  margin-left: 8px;
  margin-right: 2px;
  min-width: 60px;
}

#mc_trace_point_single_chip_num span {
  /* min-width: 75px; */
  display: inline-block;
  margin-right: 5px;
}




.title_span {
  display: inline-block;
  width: 100%;
}


/* 块数据变动提示动画 */
.block_val_chg_animation {
  /* background: red; */
  opacity: 0.5;
  animation: multiple_val_chg 0.1s;
  -webkit-animation: multiple_val_chg 0.1s;
  /* Safari 与 Chrome */
}


/* 多个数据变动时动画 */
@keyframes multiple_val_chg {
  from {
    /* background: red; */
    color: #fff;
  }

  to {
    /* background: blue; */
    color: #000000;
  }
}

.bgc_hl_x .bgc_hl_y{
  pointer-events: none;
} 